<template>
  <a-modal
    title="导出设置"
    :visible="visible"
    :confirm-loading="sending"
    @ok="handleExport"
    @cancel="$emit('cancel')"
  >
    <a-form>
      <a-row v-if="items.includes('订餐日期')">
        <a-col :span="24">
          <a-form-item label="订餐日期" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
            <a-range-picker v-model="range" allow-clear :placeholder="['全部', '全部']" @change="changeExportDate" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row v-if="items.includes('餐券状态')">
        <a-col :span="24">
          <a-form-item label="餐券状态" :label-col="{ span: 5 }" :wrapper-col="{ span: 10 }">
            <a-select v-model="params.status" :options="statusList" placeholder="全部" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script>
export default {
  name: 'ExportModal',
  props: {
    defaultParams: {
      type: Object,
      default: () => null
    },
    items: {
      type: String,
      default: ''
    },
    statusList: {
      type: Array,
      default: () => []
    },
    show: {
      type: Boolean,
      default: false
    },
    sending: {
      type: Boolean,
      default: false
    }
  },

  data () {
    return {
      params: {},
      range: [],
      status: undefined
    }
  },

  computed: {
    visible () { return this.show }
  },

  watch: {
    visible (bool) {
      if (this.show !== bool) this.$emit('show', bool)
    },

    defaultParams: {
      handler (obj) {
        const { params, changeExportDate, range, $moment } = this
        const { status, min, max } = obj
        for (const k in params) { delete params[k] }
        if (status) this.status = status
        range.splice(0)
        if (min && max) {
          range.push($moment(min), $moment(max))
          changeExportDate(null, [min, max])
        } else {
          range.splice(0)
          changeExportDate(null, [])
        }
        Object.assign(params, { ...obj })
      },
      immediate: true,
      deep: true
    }
  },

  methods: {
    changeExportDate (_, dateString) {
      const { params } = this
      if (dateString[0]) params.min = dateString[0]
      else delete params.min
      if (dateString[1]) params.max = dateString[1]
      else delete params.max
    },

    handleExport () {
      this.$emit('ok', { ...this.params })
    }
  }
}
</script>
